<template>
  <main class="content-child">
    <div v-for="(item, index) in data" v-bind:key="index">
      <h3>
        {{item.name}}(工时{{item.time}}h)
        <el-button type="text" @click="openDialog(item)">点击查看示例代码</el-button>
      </h3>
      <div class="img">
        <img :src="item.img" alt height="500px" />
        <!-- <h3>{{item.name}}(示例代码)</h3>
        <pre class="right">
        <code>{{item.code}} </code>
        </pre>-->
      </div>
      <el-dialog title="示例代码" :visible.sync="dialogVisible" width="80%">
        <span class="copy" @click="copyCode">复制代码</span>
        <span>
          <pre class="right">
            <code>{{sampleCode}}</code>
          </pre>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </main>
</template>
<script>
import { showMsg } from '../http/http'
export default {
  name: "right",
  props: {
    data: [Object, Array],
  },
  computed: {},
  data() {
    return {
      dialogVisible: false,
      sampleCode: "",
    };
  },
  created() {},
  methods: {
    openDialog(item) {
      this.sampleCode = item.code;
      this.dialogVisible = true;
      console.log(item);
    },
    // 代码复制
    copyCode() {
      var oInput = document.createElement('input');
      oInput.value = this.sampleCode;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand('Copy'); // 执行浏览器复制命令
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      showMsg('复制成功', 'success');
    }
  },
};
</script>

<style scoped lang="less">
.el-button:focus,
.el-button:hover,
.el-button:active {
  background: none;
  color: #3a8ee6;
  border-color: transparent;
}
.copy {
  cursor:pointer;
  color: #3a8ee6;
      position: absolute;
    top: 22px;
    left: 120px;
}
.img {
  border: 1px solid #000;
  height: 500px;
}
</style>
